<script setup>
    import userApi from '@/api/user.js'
    import {reactive, ref} from 'vue'
    import {ElMessage, ElMessageBox, ElTable} from 'element-plus'
    import {Edit, Delete} from '@element-plus/icons-vue'

    //表格数据
    const list = ref([])
    const total = ref()
    //分页信息
    const pageInfo = reactive({
        page: 1,
        limit: 10
    })

    const loadData = () => {
        userApi.list(pageInfo).then(result => {
            list.value = result.data.list
            //-0 操作把string类型转换为number类型
            total.value = result.data.total - 0
        })
    }
    /*function loadData() {
        userApi.list(pageInfo).then(result => {
            list.value = result.data.list
            pageInfo.total = result.data.total
        })
    }*/

    //获得数据
    loadData()

    const onSearch = () => {
        pageInfo.page = 1
        loadData()
    }

    //删除
    const deleteById = (id) => {
        ElMessageBox.confirm(
            '您确定要删除么?',
            '警告',
            {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
            }
        ).then(() => {//点击确认
            userApi.deleteById(id).then(result => {
                if (result.code == 0) {
                    ElMessage({message: result.msg, type: 'success'})
                } else {
                    ElMessage.error(result.msg)
                }
                //刷新表格数据
                loadData()
            })
        })
    }

    const ids = ref([])
    const handleSelectionChange = (rows) => {
        //console.log('多选', rows)
        ids.value = rows.map(row => row.id)
        console.log(ids.value);
    }

    const deleteAll = () => {
        ElMessageBox.confirm(
            '您确定要删除么?',
            '警告',
            {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
            }
        ).then(() => {//点击确认
            // /deleteAll/1,2,3
            ids.value = ids.value.join(',')
            userApi.deleteAll(ids.value).then(result => {
                if (result.code == 0) {
                    ElMessage({message: result.msg, type: 'success'})
                } else {
                    ElMessage.error(result.msg)
                }
                //刷新表格数据
                loadData()
            })
        })
    }

    //添加、编辑
    const dialogVisible = ref(false)
    const user = ref({})
    const title = ref()

    const showAddDialog = () => {
        dialogVisible.value = true
        title.value = '添加'
        user.value = {}
    }

    const showUpdateDialog = (id) => {
        dialogVisible.value = true
        title.value = '编辑'
        user.value = {}
        userApi.selectById(id).then(result => {
            user.value = result.data
        })
    }

    const addOrUpdate = () => {
        if (!user.value.id) {//添加
            userApi.add(user.value).then(result => {
                if (result.code == 0) {
                    ElMessage({message: result.msg, type: 'success'})
                    dialogVisible.value = false
                } else {
                    ElMessage.error(result.msg)
                }
                loadData()
            })
        } else {//编辑
            userApi.update(user.value).then(result => {
                if (result.code == 0) {
                    ElMessage({message: result.msg, type: 'success'})
                    dialogVisible.value = false
                } else {
                    ElMessage.error(result.msg)
                }
                loadData()
            })
        }

    }



</script>

<template>
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <el-button type="primary" @click="showAddDialog">添加</el-button>
                <el-button type="primary" @click="deleteAll">批量删除</el-button>
            </div>
        </template>
        <!-- 搜索表单 -->
        <el-form inline>
            <el-form-item label="名字：">
                <el-input v-model="pageInfo.name" placeholder="请输入名字"/>
            </el-form-item>
            <el-form-item label="年龄：">
                <el-input v-model="pageInfo.age" placeholder="请输入名字"/>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSearch">搜索</el-button>
                <el-button @click="pageInfo.name = ''; pageInfo.age = ''">重置</el-button>
            </el-form-item>
        </el-form>
        <el-table ref="multipleTableRef" @selection-change="handleSelectionChange" :data="list" :stripe="true"
                  :border="true" style="width: 100%">
            <el-table-column type="selection" width="55"/>
            <el-table-column prop="id" label="ID"/>
            <el-table-column prop="name" label="名字"/>
            <el-table-column prop="age" label="年龄"/>
            <el-table-column prop="email" label="邮箱"/>
            <el-table-column prop="createTime" label="创建时间"/>
            <el-table-column label="操作" width="315">
                <template #default="{ row }">
                    <el-button :icon="Edit" circle plain type="primary" @click="showUpdateDialog(row.id)"></el-button>
                    <el-button :icon="Delete" circle plain type="danger" @click="deleteById(row.id)"></el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination class="page" v-model:current-page="pageInfo.page" v-model:page-size="pageInfo.limit"
                       :total="total" :page-sizes="[10, 20, 50, 100]" :background="true"
                       layout="total, sizes, prev, pager, next, jumper" @change="loadData"
                       style="margin-top: 20px; justify-content: flex-end"/>
    </el-card>

    <!--添加、编辑的弹出框-->
    <el-dialog v-model="dialogVisible" :title="title" width="500">
        <el-form :model="user">
            <el-form-item label="名字" :label-width="60">
                <el-input v-model="user.name" placeholder="请输入名字:" autocomplete="off"/>
            </el-form-item>
            <el-form-item label="年龄" :label-width="60">
                <el-input v-model="user.age" placeholder="请输入年龄:" autocomplete="off"/>
            </el-form-item>
            <el-form-item label="邮箱" :label-width="60">
                <el-input v-model="user.email" placeholder="请输入邮箱:" autocomplete="off"/>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="addOrUpdate">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<style scoped>
    .page-container {
        min-height: 100%;
        box-sizing: border-box;
    }
</style>